<template>
  <div>
    <h-box header="全部门店可用的会员卡">
      <el-row :gutter="16">
        <el-col :span="8" v-for="item in card.list1" :key="item.cardId">
          <el-card shadow="hover" class="hui-mb-1" body-style="padding: 0;">
            <h-image mode="background-image" :src="item.backgroundPicUrl" width="100%" height="160px"></h-image>
            <div class="hui-p-1">
              <div class="hui-font-size-medium hui-font-weight-primary">{{ item.title }}</div>
              <div class="hui-flex hui-flex--y-center">
                <div class="hui-font-size-small hui-color-text-secondary hui-flex__auto">等级：{{ item.level }}</div>
                <el-button @click="handleEdit(item)" type="primary" size="mini">编辑</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8" v-if="card.list1.length < 5">
          <el-card shadow="hover" class="hui-mb-1" style="height: 246px; position: relative;" body-style="padding: 0;">
            <div @click="handleCardCreate('1')" class="hui-cardlist-add">
              <i class="el-icon-plus"></i>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="hui-color-text-secondary hui-font-size-base">
        <div>玩法说明：</div>
        <ol class="hui-pl-1 hui-m-0">
          <li>最多创建 5 张全部门店可用的会员卡，每张会员卡为一个等级，5 张会员卡即 5 个会员等级</li>
          <li>每个等级的会员卡，仅限 1 张，如若同一等级有多张会员卡存在，会导致升级条件混乱</li>
          <li>我们建议，会员等级不要超过 3 个，因为等级过多消费者会搞不清楚规则，运营上也会比较混乱</li>
          <li>会员升级，采用逐级升级的方式进行，不会跳级升级</li>
          <li>用户的会员卡等级升级后，低等级的微信卡包会员卡将被设置失效，用户可将新的高等级会员卡重新添加到微信卡包里</li>
          <li>用户可同时持有全部门店可用的会员卡和部分门店可用的会员卡</li>
          <li>全部门店可用的会员卡，系统根据商家设定的发卡规则自动给用户发卡</li>
        </ol>
      </div>
    </h-box>

    <h-box header="部分门店可用的会员卡">
      <el-row :gutter="16">
        <el-col :span="8" v-for="item in card.list2" :key="item.cardId">
          <el-card shadow="hover" class="hui-mb-1" body-style="padding: 0;">
            <h-image mode="background-image" :src="item.backgroundPicUrl" width="100%" height="160px"></h-image>
            <div class="hui-p-1">
              <div class="hui-font-size-medium hui-font-weight-primary">{{ item.title }}</div>
              <div class="hui-flex hui-flex--y-center">
                <div class="hui-font-size-small hui-color-text-secondary hui-flex__auto">
                  售价：
                  <span v-if="item.price > 0" class="hui-font-number">{{ (item.price / 100) | currency('￥', 2) }}</span>
                  <template v-else>无</template>
                </div>
                <el-button @click="handleCopy(item)" type="success" size="mini">链接</el-button>
                <el-button @click="handleEdit(item)" type="primary" size="mini">编辑</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8" v-if="card.list2.length < 20">
          <el-card shadow="hover" class="hui-mb-1" style="height: 246px; position: relative;" body-style="padding: 0;">
            <div @click="handleCardCreate('2')" class="hui-cardlist-add">
              <i class="el-icon-plus"></i>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="hui-color-text-secondary hui-font-size-base">
        <div>玩法说明：</div>
        <ol class="hui-pl-1 hui-m-0">
          <li>最多创建 20 张部分门店可用的会员卡</li>
          <li>用户可同时持有多张部分门店可用的会员卡</li>
          <li>用户可同时持有全部门店可用的会员卡和部分门店可用的会员卡</li>
          <li>部分门店可用的会员卡，需用户主动领取或购买，您可以复制链接，放在图文消息里，或转换成二维码，在门店进行推广</li>
        </ol>
      </div>
    </h-box>
  </div>
</template>

<script>
export default {
  data () {
    return {
      card: {
        list1: [],
        list2: []
      }
    }
  },
  created () {
    this.getCard()
  },
  methods: {
    getCard () {
      let tmp = [
        {
          cardType: 1,
          cardId: 1,
          title: '会员卡名称1',
          backgroundPicUrl: this.$randomEnum(this.$store.state.image),
          level: 1,
          price: undefined,
          cardUrl: '',
          status: 0
        },
        {
          cardType: 1,
          cardId: 2,
          title: '会员卡名称2',
          backgroundPicUrl: this.$randomEnum(this.$store.state.image),
          level: 2,
          price: undefined,
          cardUrl: '',
          status: 0
        },
        {
          cardType: 2,
          cardId: 3,
          title: '会员卡名称3',
          backgroundPicUrl: this.$randomEnum(this.$store.state.image),
          level: undefined,
          price: 2000,
          cardUrl: 'http://www.qq.com',
          statys: 0
        },
        {
          cardType: 2,
          cardId: 9,
          title: '会员卡名称9',
          backgroundPicUrl: this.$randomEnum(this.$store.state.image),
          level: undefined,
          price: 2000,
          cardUrl: 'http://www.qq.com',
          statys: 0
        },
        {
          cardType: 2,
          cardId: 10,
          title: '会员卡名称10',
          backgroundPicUrl: this.$randomEnum(this.$store.state.image),
          level: undefined,
          price: undefined,
          cardUrl: 'http://www.qq.com',
          statys: 0
        }
      ]
      tmp.map(element => {
        switch (element.cardType) {
          case 1:
            let list1 = this.card.list1
            list1.sort((a, b) => a.level - b.level).push(element)
            break
          case 2:
            let list2 = this.card.list2
            list2.sort((a, b) => a.cardId - b.cardId).push(element)
            break
        }
      })
    },

    // 新建会员卡
    handleCardCreate (cardType) {
      this.$router.push({
        path: 'detail',
        query: {
          type: 'create',
          cardType: cardType
        }
      })
    },

    // 复制链接
    handleCopy (item) {
      this.$confirm(item.cardUrl, '领取 / 购买链接', {
        confirmButtonText: '复制',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        this.$copyText(item.cardUrl).then(res => {
          console.log('复制成功:' + res)
          item.visibleClipboard = false
          this.$notify({
            title: '复制成功',
            message: '可将链接粘贴到想用的地方',
            type: 'success',
            duration: 1500
          })
        }).catch(err => {
          console.log('复制失败:' + err)
          this.$notify({
            title: '复制失败',
            message: '请选择活动链接，手工 Ctrl + C 进行复制',
            type: 'warning',
            duration: 3000
          })
        })
      }).catch(() => {})
    },

    // 编辑
    handleEdit (item) {
      this.$router.push({
        path: 'detail',
        query: {
          type: 'edit',
          cardType: item.cardType,
          cardId: item.cardId
        }
      })
    }
  }
}
</script>

<style lang="less">
@import "../../../../../common/h-theme/_variable.less";

.hui-cardlist-add {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: @--background-color-base;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 48px;
  color: @--link-color;
  transition: @--color-transition-base;

  &:hover {
    color: @--link-hover-color;
  }
}
</style>
